<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport'     content='width=device-width, initial-scale=1'>
    <meta name='description'  content='Class Diagram: Schema - PocStore'>
    <meta name='color-scheme' content='dark light'>
    <meta name='generated-by' content='https://github.com/friflo/Friflo.Json.Fliox#schema'>
    <link rel='icon' href='../../../explorer/img/Json-Fliox-53x43.svg' type='image/x-icon'>
    <title>PocStore - Class Diagram</title>
    <script src='../../../mermaid/dist/mermaid.min.js'></script>
    <style>
        :root {
            --enum-fill:   #f8f8f8;
            --enum-stroke: #d0d0d0;
        }
        @media print {
          .hidden-print {
            display: none !important;
          }
        }
        [data-theme='dark'] {
            --enum-fill:   #3e3e3e;
            --enum-stroke: #606060;
        }
        .mermaid {            
            width: 1440px;  /** Enable zooming in Mermaid svg **/
        }
        .cssSchema > rect {
            stroke-width:2px !important;
            stroke:#ff0000 !important;
            rx: 8;
        }
        .cssEntity > rect {
            stroke-width:2px !important;
            stroke:#0000ff !important;
            rx: 8;
        }
        .cssEnum > rect {
            fill:  var(--enum-fill)   !important;
            stroke:var(--enum-stroke) !important;
        }
        .title      { margin: 0px 0px 0px 20px; height: 26px; padding: 3px 10px; display: inline-flex; box-shadow: 0px 0px  7px  7px #00000014; border-radius: 4px; }
        .diagram    { margin: 0px 20px;         height: 18px; padding: 3px 10px; display: inline-flex; box-shadow: 0px 0px 10px 10px #00000018; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;            }
        .titleH2    { color: black; font-size: 20px; background-color: #ffffff; border: 1px solid #aaa; margin-top: 10px;align-items: center; }
    </style>
</head>
<body>
    <div style='position: fixed; top: 0; font-family: sans-serif;'>
      <h2 class='title titleH2'>PocStore</h2>
      <div class='diagram hidden-print' style='background-color: #363bff; position: fixed; top: 0;'>
        <a href='./schema.html' style='color: white; text-decoration: none;'>Schema</a>
      </div>
    </div>
    <div id='graphDiv'></div>
    <script>
        let mermaidContent = `classDiagram
direction LR

class PocStore:::cssSchema {
    <<Schema>>
    <<abstract>>
    orders       : [id] ➞ Order
    customers    : [id] ➞ Customer
    articles     : [id] ➞ Article
    articles2    : [id] ➞ Article
    producers    : [id] ➞ Producer
    employees    : [id] ➞ Employee
    types        : [id] ➞ TestType
    nonClsTypes  : [id] ➞ NonClsType
    keyName      : [testId] ➞ TestKeyName
}
PocStore *-- "0..*" Order : orders
PocStore *-- "0..*" Customer : customers
PocStore *-- "0..*" Article : articles
PocStore *-- "0..*" Article : articles2
PocStore *-- "0..*" Producer : producers
PocStore *-- "0..*" Employee : employees
PocStore *-- "0..*" TestType : types
PocStore *-- "0..*" NonClsType : nonClsTypes
PocStore *-- "0..*" TestKeyName : keyName

class Order:::cssEntity {
    <<Entity · id>>
    id        : string
    customer? : string
    created   : DateTime
    items?    : OrderItem[]
}
Order o.. "0..1" Customer : customer
Order *-- "0..*" OrderItem : items

class Customer:::cssEntity {
    <<Entity · id>>
    id    : string
    name  : string
}

class Article:::cssEntity {
    <<Entity · id>>
    id        : string
    name      : string
    producer? : string
}
Article o.. "0..1" Producer : producer

class Producer:::cssEntity {
    <<Entity · id>>
    id         : string
    name       : string
    employees? : string[]
}
Producer o.. "0..*" Employee : employees

class Employee:::cssEntity {
    <<Entity · id>>
    id         : string
    firstName  : string
    lastName?  : string
}

class PocEntity {
    <<abstract>>
    id  : string
}

PocEntity <|-- TestType
class TestType:::cssEntity {
    <<Entity · id>>
    dateTime          : DateTime
    dateTimeNull?     : DateTime
    bigInt            : BigInteger
    bigIntNull?       : BigInteger
    boolean           : boolean
    booleanNull?      : boolean
    uint8             : uint8
    uint8Null?        : uint8
    int16             : int16
    int16Null?        : int16
    int32             : int32
    int32Null?        : int32
    int64             : int64
    int64Null?        : int64
    float32           : float
    float32Null?      : float
    float64           : double
    float64Null?      : double
    pocStruct         : PocStruct
    pocStructNull?    : PocStruct
    intArray          : int32[]
    intArrayNull?     : int32[]
    intNullArray?     : (int32 | null)[]
    jsonValue?        : any
    derivedClass      : DerivedClass
    derivedClassNull? : DerivedClass
    testEnum          : TestEnum
    testEnumNull?     : TestEnum
}
TestType *-- "1" PocStruct : pocStruct
TestType *-- "0..1" PocStruct : pocStructNull
TestType *-- "1" DerivedClass : derivedClass
TestType *-- "0..1" DerivedClass : derivedClassNull
TestType *-- "1" TestEnum : testEnum
TestType *-- "0..1" TestEnum : testEnumNull

class NonClsType:::cssEntity {
    <<Entity · id>>
    id          : string
    int8        : int8
    uint16      : uint16
    uint32      : uint32
    uint64      : uint64
    int8Null?   : int8
    uint16Null? : uint16
    uint32Null? : uint32
    uint64Null? : uint64
}

class TestKeyName:::cssEntity {
    <<Entity · testId>>
    testId  : string
    value?  : string
}

class OrderItem {
    article  : string
    amount   : int32
    name?    : string
}
OrderItem o.. "1" Article : article

class PocStruct {
    value  : int32
}

OrderItem <|-- DerivedClass
class DerivedClass {
    derivedVal  : int32
}

class TestEnum:::cssEnum {
    <<enumeration>>
    NONE
    e1
    e2
}



`;
        /* const search = /\</g;
        mermaidContent = mermaidContent.replace(search, '&lt;');
        const div = document.createElement('div');
        div.classList.add('mermaid');
        div.innerHTML = mermaidContent;
        document.body.append(div);
        mermaid.initialize({ startOnLoad: true}); */
        let theme = 'default';
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            theme = 'dark';
            document.documentElement.setAttribute('data-theme', 'dark');
        }
        mermaid.mermaidAPI.initialize({ startOnLoad: false, logLevel: 4, theme: theme });
        const mermaidEl = document.getElementById('graphDiv');
        const insertSvg = function (svgCode, bindFunctions) {
            mermaidEl.innerHTML = svgCode;
        };
        mermaid.mermaidAPI.render('graph', mermaidContent, insertSvg);
    </script>
</body>
</html>
